import React, { forwardRef, useImperativeHandle, useState } from 'react';

// 在子组件中需要将子组件的数据和方法抛出去, 这样父组件才能通过ref获取到子组件上的数据和方法
// 需要使用useImperacivehandle(ref,()=>{return {key:value} })
// useImperacivehandle参数1: 为 ref, 
// useImperacivehandle参数2: 为一个回调函数, 回调函数的返回值为需要抛出的数据和方法
const Son = (props, ref) => {
    const [user, setUser] = useState({ name: '吕洞兵', age: 30 })

    // return 的返回值就是抛给父组件的数据
    useImperativeHandle(ref, () => {
        return {
            user,
            addAge,
            getuser
        }
    })

    const addAge = () => {
        setUser({
            ...user,
            age: user.age + 1
        })


    }
    const getuser = () => {
        return user
    }
    return (
        <div>
            <p onClick={() => addAge()}>我是子组件--{user.name}-{user.age}</p>
        </div>
    );
}

export default forwardRef(Son);
